<template lang="html">
  <section>
    <swiper v-if="items" :options="options" class="swiper-container">
      <swiper-slide class="swiper-item" v-for="(item,index) in items" :key="index">
        <router-link tag="div" :to="{name:item.href}">
          <img v-if="item.img" :src="item.img" alt="">
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </section>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  export default {
    props: {
      cname: {
        type: String,
        default: ""
      },
      options: {
        type: Object,
        default() {
          return {
            autoplay: true,
            loop: true,
            pagination: {
              el: '.swiper-pagination',
            },
            notNextTick: false
          }
        }
      },
      items: {
        type: Array,
        default() {
          return []
        }
      }
    },
    components: {
      swiper,
      swiperSlide,
    },
    data() {
      return{
        
      }
    }
    
  }
</script>
<style lang="scss">
  @import '~swiper/dist/css/swiper.css';
  .swiper-container {
    width: 100%;
    overflow: hidden;
    .swiper-item {
      width: 100%;
      box-sizing: border-box;
      img {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: -12px;
      }
    }
  }  
</style>